﻿<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>中国省市区地址三级联动jQuery插件</title>
	<link href="./bootstrap-3.4.1-dist//css//bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div class="jq22-container">
		<div class="container">
      <h4>中国省市区地址三级联动jQuery插件</h4>

      <form class="form-inline">
        <div data-toggle="distpicker">
          <div class="form-group">
            <label class="sr-only" for="province1">Province</label>
            <select class="" id="province1"></select>
          </div>
          <div class="form-group">
            <label class="sr-only" for="city1">City</label>
            <select class="form-control" id="city1"></select>
          </div>
          <div class="form-group">
            <label class="sr-only" for="district1">District</label>
            <select class="form-control" id="district1"></select>
          </div>
        </div>
      </form>
      <button onclick="getData()">获取</button>
		</div>
	</div>
	
	<!-- <script type="text/javascript" src="jquery-3.5.1/jquery-3.5.1.min.js" ></script> -->
  <script type="text/JavaScript" src="jquery-easyui-1.9.15/jquery.min.js" ></script>
  <script type="text/javascript" src="jquery-easyui-1.9.15/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="bootstrap-3.4.1-dist/css/bootstrap.min.css" ></script>
	<script src="js/distpicker.data.js"></script>
  <script src="js/distpicker.js"></script>
  <script src="js/main.js"></script>
</body>

<script>

  function getData (){
    var province1 = $("#province1").find("option:selected");
    var city1 = $("#city1").find("option:selected").text();
    var district1 = $("#district1").find("option:selected").text();
    console.log('省: ',province1, '，市：',city1, '，区：',district1)
  } 

  
</script>

</html>